<template>
    <div class="vuePrc">
      <!-- <h2>父组件</h2> -->
      <!-- <vue-ref></vue-ref> -->
       <alive-prc></alive-prc>
      <!-- <provide-inject></provide-inject> -->
      <!-- <vue-slot>
        <template v-slot:header>
          <h1>Here might be a page title</h1>
        </template>
         <template v-slot:default>
          <p>A paragraph for the main content.</p>
          <p>And another one.</p>
        </template>
        <template v-slot:footer>
          <p>Here's some contact info</p>
        </template>
      </vue-slot> -->
      <!-- <vue-slot>
        <template v-slot:default="slotProps">
          <span >{{ slotProps.item }}</span>
        </template>
      </vue-slot> -->
      <!-- <p>来自子组件的输入{{msg}} {{bookTitle}}</p> -->
      <!-- <footter v-model:title="bookTitle" @up="receive" @updateTitle="uptTitle"></footter> -->
      <!-- <todo-item v-bind="$attrs"></todo-item> -->
      <!-- <ol>
       <todo-item v-for="(item,index) in todos" :key="index" :propmsg="item.id"></todo-item>
      </ol> -->
      <!-- <div>
        <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
        <label for="jack" >jack</label>
        <input type="checkbox" id="John" value="John" v-model="checkedNames">
        <label for="John" >John</label>
        <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
        <label for="mike" >mike</label>
        <br />
        <span>Checked names: {{ checkedNames }}</span>
      </div> -->
      <!-- <div class="v-model-radiobutton">
        <input type="radio" name="" id="one" value="one" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" name="" id="two" value="two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked : {{picked}}</span>
      </div> -->
      <!-- <div class="v-model-select">
        <select name="" id="" v-model="selectd"  multiple>
          <option disabled value="">Please select one</option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
        <br>
        <span>
          Select : {{selectd}}
        </span>
      </div> -->
      <!-- <div class="selectDemo">
        <select v-model="selected">
          <option v-for="option in options" :value="option.value" :key="option.text">
        {{ option.text }}
      </option>
      </select>
      <br>
      <span>Selected: {{ selected }}</span>
      </div> -->
    </div>
</template>
<script lang="ts">
import { Vue, Options, Watch, Provide } from 'vue-property-decorator';
import TodoItem from './vuePrc/TodoItem.vue';
import Footter from './vuePrc/Footter.vue';
import VueSlot from './vuePrc/VueSlot.vue';
import ProvideInject from './vuePrc/ProvideInject.vue';
import AlivePrc from './vuePrc/AliveComponent/AlivePrc.vue';
import VueRef from './vuePrc/VueRef.vue';


@Options({ components: {
  TodoItem,
  Footter,
  VueSlot,
  ProvideInject,
  AlivePrc,
  VueRef,
} })
export default class VuePrc extends Vue {
  public options = [
    { text: 'ni', value: 'A' },
    { text: 'Two', value: 'B' },
    { text: 'Three', value: 'C' },
  ];
  @Provide() public user = this.options.length;
  @Provide() public get returnTodoLength() {
    return this.options.length;
  }


  public isActive = true;
  public red = 'red';
  public bookTitle='热爱';

  public selectd = '';
  public picked = 'two';
  public checkedNames = ['jack'];
  public count = 1;
  public todos = [
    { text: 'Learn JavaScript', id: 1 },
    { text: 'Learn Vue', id: 2 },
    { text: 'Build something awesome', id: 3 }];
  public msg = '';


  public uptTitle(title: string) {
    this.bookTitle = `${this.bookTitle}${title}`;
  }
  public receive(message: string) {
    this.msg = message;
  }
  public submitChange(e: { target: { value: any; }; }) {
    // console.log(e.target.value);
  }
  public mounted() {
    // console.log('mounted', this.$el);
  }
  public beforeMount() {
    // console.log('beforeMounted', this.$el);
  }
  public created() {
    // console.log(this.$el);
    console.log('$attrs', this.$attrs);
  }
  public beforeCreate() {
    // 不要在选项 property 或回调上使用箭头函数
    // 因为箭头函数并没有 this
    // `this` 指向 vm 实例
    // console.log(`count is ${this.count}`);  // 为什么可以访问到this
  }
}
</script>

<style lang="postcss" scoped>
.vuePrc{

}
</style>
